<template>
	<div class="position">
		<div class="nav navbar-example  nav-tabs" data-spy="scroll" data-target=".navbar-example" >
			<ul id="menu">
				<li><a class="link-a xz" href="#cd-placeholder-1"  id ="lable1" >Intro</a></li>
				<li><a class="link-a" href="#cd-placeholder-2"  id ="lable2"  >Location</a></li>
				<li><a class="link-a" href="#cd-placeholder-3"  id ="lable3"  >Chat</a></li>
				<li><a class="link-a" href="#cd-placeholder-4"  id ="lable4"  >Calendar</a></li>
				<li><a class="link-a" href="#cd-placeholder-5"  id ="lable5"  >Stats</a></li>
			</ul>
		</div>
		<div style="clear: both;"></div>
		<div class="content">
			<div id="cd-placeholder-1">
				<div style="height: 30px;"></div>
				<p >Intro</p>
				<span>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem ab consequatur fugiat delectus sint in velit quo possimus,
				ullam aspernatur ipsa natus tenetur nulla distinctio doloremque totam. Earum enim sed dolorum, exercitationem temporibus quaerat eos,
				 accusantium amet facilis facere eaque commodi optio quidem rem minima nisi laborum quae animi nostrum aut voluptates veniam. Cum neque
				 quam fuga sapiente quidem eum necessitatibus nulla, cupiditate a, repudiandae iusto in dolor eaque commodi nostrum consequuntur
				 dolores velit eligendi dolorem quae. Distinctio quae, cumque aliquid quos consequuntur perspiciatis voluptates, laboriosam velit qui
				 et aut sint esse nemo voluptatibus, dolore veritatis natus facilis commodi sed. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
				 Corporis tempore, harum consequatur optio laboriosam nihil sint voluptatem ducimus porro quae expedita alias consectetur explicabo cumque
				  maxime facere praesentium! Ad illo quibusdam omnis suscipit qui eos autem est laborum ducimus! Tenetur?
			</span>
			</div>
			<div id="cd-placeholder-2">
				<div style="height: 30px;"></div>
				<p>Location</p>
				<span >
					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem ab consequatur fugiat delectus sint in velit quo possimus,
				ullam aspernatur ipsa natus tenetur nulla distinctio doloremque totam. Earum enim sed dolorum, exercitationem temporibus quaerat eos,
				 accusantium amet facilis facere eaque commodi optio quidem rem minima nisi laborum quae animi nostrum aut voluptates veniam. Cum neque
				 quam fuga sapiente quidem eum necessitatibus nulla, cupiditate a, repudiandae iusto in dolor eaque commodi nostrum consequuntur
				 dolores velit eligendi dolorem quae. Distinctio quae, cumque aliquid quos consequuntur perspiciatis voluptates, laboriosam velit qui
				 et aut sint esse nemo voluptatibus, dolore veritatis natus facilis commodi sed. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
				 Corporis tempore, harum consequatur optio laboriosam nihil sint voluptatem ducimus porro quae expedita alias consectetur explicabo cumque
				  maxime facere praesentium! Ad illo quibusdam omnis suscipit qui eos autem est laborum ducimus! Tenetur?
			</span>
			</div>
			<div  id="cd-placeholder-3">
				<div style="height: 30px;"></div>
				<p>Chat</p>
				<span>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem ab consequatur fugiat delectus sint in velit quo possimus,
					ullam aspernatur ipsa natus tenetur nulla distinctio doloremque totam. Earum enim sed dolorum, exercitationem temporibus quaerat eos,
					accusantium amet facilis facere eaque commodi optio quidem rem minima nisi laborum quae animi nostrum aut voluptates veniam.
					Cum neque quam fuga sapiente quidem eum necessitatibus nulla, cupiditate a, repudiandae iusto in dolor eaque commodi nostrum consequuntur dolores
					velit eligendi dolorem quae. Distinctio quae, cumque aliquid quos consequuntur perspiciatis voluptates, laboriosam velit qui et aut sint esse nemo
					voluptatibus, dolore veritatis natus facilis commodi sed. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias sunt mollitia atque tempore
					 ea cum exercitationem, quisquam est consectetur tempora ipsam, obcaecati voluptate a. Autem minus cumque voluptatem eaque fugit nostrum reprehenderit
					 incidunt officia. Nesciunt reiciendis delectus officiis fugit sint at totam nisi commodi repellendus iusto dolorum molestias dignissimos natus, impedit
					  quam atque ex voluptas ut facere assumenda iure incidunt rerum vitae accusamus? Et voluptatibus unde, fugiat tenetur sed dolore, praesentium magni illo
					  nobis incidunt, possimus doloremque dolorem sunt. Aliquid ducimus delectus esse voluptatem officia perferendis,
					 a voluptate omnis adipisci expedita distinctio praesentium natus veniam accusamus iure, quasi, inventore reiciendis.
			</span>
			</div>
			<div  id="cd-placeholder-4">
				<div style="height: 30px;"></div>
				<p>Calendar</p>
				<span>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem ab consequatur fugiat delectus sint in velit quo possimus,
					ullam aspernatur ipsa natus tenetur nulla distinctio doloremque totam. Earum enim sed dolorum, exercitationem temporibus quaerat eos,
					 accusantium amet facilis facere eaque commodi optio quidem rem minima nisi laborum quae animi nostrum aut voluptates veniam.
					  Cum neque quam fuga sapiente quidem eum necessitatibus nulla, cupiditate a, repudiandae iusto in dolor eaque commodi nostrum consequuntur
					  dolores velit eligendi dolorem quae. Distinctio quae, cumque aliquid quos consequuntur perspiciatis voluptates, laboriosam velit qui et
					  aut sint esse nemo voluptatibus, dolore veritatis natus facilis commodi sed. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
					  Aliquam, minus nisi ipsam quasi. Reprehenderit quo dolorem ratione in, porro placeat nihil asperiores, ab earum excepturi sint non.
					  Error officiis, sint expedita dolore fuga voluptates ipsam temporibus vero suscipit porro asperiores deserunt sapiente optio.
					  Quas vero nam nihil, id suscipit, similique facere dicta velit, quis, commodi perspiciatis. Perferendis necessitatibus, in,
					  sequi ipsum eum voluptates quisquam voluptatem, rerum fugiat deleniti voluptatum eius odio, expedita enim libero quaerat! Veniam eos,
					  maiores nostrum mollitia reprehenderit, obcaecati repudiandae eius perspiciatis? Quo voluptatum ipsa voluptatem sequi esse eius consectetur
					  , quae ea accusamus porro autem ipsum, quam dignissimos, nesciunt consequuntur quaerat. Numquam iure velit veniam saepe sunt enim
					  asperiores hic nam aperiam illo officia molestias quis dicta autem incidunt consequatur dolor, explicabo corrupti nostrum odio ea
					  laudantium magni, nulla. Eaque officiis, distinctio, dolores eligendi facilis tempore reiciendis illum iste sed temporibus rerum
					  aliquid culpa dolor, et voluptatibus!
			</span>
			</div>
			<div  id="cd-placeholder-5">
				<div style="height: 30px;"></div>
				<p>Stats</p>
				<span>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem ab consequatur fugiat delectus sint in velit quo possimus,
						ullam aspernatur ipsa natus tenetur nulla distinctio doloremque totam. Earum enim sed dolorum, exercitationem temporibus quaerat eos,
						 accusantium amet facilis facere eaque commodi optio quidem rem minima nisi laborum quae animi nostrum aut voluptates veniam.
						  Cum neque quam fuga sapiente quidem eum necessitatibus nulla, cupiditate a, repudiandae iusto in dolor eaque commodi nostrum
						  consequuntur dolores velit eligendi dolorem quae. Distinctio quae, cumque aliquid quos consequuntur perspiciatis voluptates,
						  laboriosam velit qui et aut sint esse nemo voluptatibus, dolore veritatis natus facilis commodi sed. Lorem ipsum dolor sit amet,
						  consectetur adipisicing elit. Harum, neque, tempora. Accusamus similique labore harum in ut repellat. Earum iusto non ex perspiciatis
						   sequi a, provident nam optio, vitae ea vel illum excepturi aut fugiat quos. Fugit facere a, quidem quia perferendis ipsum impedit
							eaque repellendus esse, tenetur repellat natus voluptatem ab possimus laborum tempora qui nam vero et omnis. Sed ipsum possimus in,
							 dignissimos optio itaque quis, reprehenderit vero vel tempora, maiores odit totam. Doloribus voluptatem similique possimus corporis
							  pariatur labore, nulla, minima magnam, officia rerum vel alias, molestiae soluta quisquam ea. Necessitatibus hic vitae nisi ipsum
							   cum a voluptatibus commodi eius ad minus animi cumque nulla suscipit itaque, reiciendis placeat modi sequi eligendi voluptatum.
								Quasi veritatis autem omnis, voluptatum hic eos dicta, repudiandae iusto rem error facere pariatur commodi impedit reprehenderit
								 temporibus facilis magnam asperiores. Ipsam, illum commodi laboriosam neque eligendi eaque quisquam quidem illo sint eos.
								  Esse velit provident, veritatis dolor facilis dignissimos commodi molestias saepe impedit excepturi qui odit repudiandae
								  cumque? Sunt omnis voluptatum, eaque repellat, pariatur iure nobis cum eos repellendus voluptate culpa totam alias autem ea
								  earum animi optio laudantium neque nisi suscipit in adipisci enim quisquam laboriosam! Cumque, fugit saepe alias mollitia
								  dignissimos.
								  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem ab consequatur fugiat delectus sint in velit quo possimus,
						ullam aspernatur ipsa natus tenetur nulla distinctio doloremque totam. Earum enim sed dolorum, exercitationem temporibus quaerat eos,
						 accusantium amet facilis facere eaque commodi optio quidem rem minima nisi laborum quae animi nostrum aut voluptates veniam.
						  Cum neque quam fuga sapiente quidem eum necessitatibus nulla, cupiditate a, repudiandae iusto in dolor eaque commodi nostrum
						  consequuntur dolores velit eligendi dolorem quae. Distinctio quae, cumque aliquid quos consequuntur perspiciatis voluptates,
						  laboriosam velit qui et aut sint esse nemo voluptatibus, dolore veritatis natus facilis commodi sed. Lorem ipsum dolor sit amet,
						  consectetur adipisicing elit. Harum, neque, tempora. Accusamus similique labore harum in ut repellat. Earum iusto non ex perspiciatis
						   sequi a, provident nam optio, vitae ea vel illum excepturi aut fugiat quos. Fugit facere a, quidem quia perferendis ipsum impedit
							eaque repellendus esse, tenetur repellat natus voluptatem ab possimus laborum tempora qui nam vero et omnis. Sed ipsum possimus in,
							 dignissimos optio itaque quis, reprehenderit vero vel tempora, maiores odit totam. Doloribus voluptatem similique possimus corporis
							  pariatur labore, nulla, minima magnam, officia rerum vel alias, molestiae soluta quisquam ea. Necessitatibus hic vitae nisi ipsum
							   cum a voluptatibus commodi eius ad minus animi cumque nulla suscipit itaque, reiciendis placeat modi sequi eligendi voluptatum.
								Quasi veritatis autem omnis, voluptatum hic eos dicta, repudiandae iusto rem error facere pariatur commodi impedit reprehenderit
								 temporibus facilis magnam asperiores. Ipsam, illum commodi laboriosam neque eligendi eaque quisquam quidem illo sint eos.
								  Esse velit provident, veritatis dolor facilis dignissimos commodi molestias saepe impedit excepturi qui odit repudiandae
								  cumque? Sunt omnis voluptatum, eaque repellat, pariatur iure nobis cum eos repellendus voluptate culpa totam alias autem ea
								  earum animi optio laudantium neque nisi suscipit in adipisci enim quisquam laboriosam! Cumque, fugit saepe alias mollitia
								  dignissimos.
			</span>
			</div>
		</div>
	</div>
</template>

<script>
    export default {
        name: "Position"
    }
    $(function(){


        $(window).scroll(function(){
            // 距离整个网页顶部的高度
            var top = $(window).scrollTop();   //设置变量top,表示当前滚动条到顶部的值 //


            // 当前元素距离body的高度
            var d0Top = $("#cd-placeholder-1").offset().top;//获取到body的高度 30
            var d1Top = $("#cd-placeholder-2").offset().top; // 700
            var d2Top = $("#cd-placeholder-3").offset().top; // 1400
            var d3Top = $("#cd-placeholder-4").offset().top;
            var d4Top = $("#cd-placeholder-5").offset().top;

            let topArr = [];
            topArr.push();
            top+=50;//滑动的距离
//滚动判断高度给导航栏设置颜色
            if (d0Top<top && top<d1Top) {
                $("#menu > li > a").removeClass("xz").eq(0).addClass("xz");
            }
            if (d1Top<top && top<d2Top) {
                $("#menu > li > a").removeClass("xz").eq(1).addClass("xz");
            }
            if (d2Top<top && top<d3Top) {
                $("#menu > li > a").removeClass("xz").eq(2).addClass("xz");
            }
            if (d3Top<top && top<d4Top) {
                $("#menu > li > a").removeClass("xz").eq(3).addClass("xz");
            }
            if (d4Top<top) {
                $("#menu > li > a").removeClass("xz").eq(4).addClass("xz");
            }





        })
//点击跳转
        $("#lable1").click(function(){
            $("html,body").animate({scrollTop:$("#cd-placeholder-1").offset().top},600);

        })
        $("#lable2").click(function(){
            $("html,body").animate({scrollTop:$("#cd-placeholder-2").offset().top},600);

        })
        $("#lable3").click(function(){
            $("html,body").animate({scrollTop:$("#cd-placeholder-3").offset().top},600);
        })
        $("#lable4").click(function(){
            $("html,body").animate({scrollTop:$("#cd-placeholder-4").offset().top},600);
        })
        $("#lable5").click(function(){
            $("html,body").animate({scrollTop:$("#cd-placeholder-5").offset().top},600);
        })


    })
</script>

<style scoped>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        /*text-align: center;*/
        color: #2c3e50;
    }
    .nav ul li a:hover{
        color: white!important;
    }

    .xz{
        color: white!important;
    }
    .content{
        width: 50%;
        margin: 0 auto;
    }
    .content span{
        line-height: 2;
    }
    .content p{
        font-weight: bold;
        margin: 40px 0px;
    }
    .nav{
        width: 100%;
        /*height: 100px;
        line-height: 100px;*/
        background-color: black;
        position: fixed;
        top: 0px;
        left: 0px;
        margin: 0 auto;
        text-align: center;
    }
    .nav ul{
        display: inline-block;
        overflow: auto;
    }
    .nav ul li{
        /*width: 3%;*/
        float: left;
        list-style-type: none;/*去掉无序列表小圆点*/
        font-weight: bold;
        color:lightgrey;
        text-align: center;
        width: 266px;
    }
    .nav ul a{
        text-decoration: none;/*去掉下划线*/
        color: darkgrey;
    }
    .nav ul a:hover{
        color: white;
    }
</style>